<template>
  <div>
    <ul>
      <li v-for="item in musicList" :key="item.id">
        <router-link :to="`/mine/detail/${item.song}`">{{item.song}}</router-link>
        <!-- <button @click="jumpToDetail(item.song)">{{item.song}}</button> -->
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  data () {
    return {
      musicList: [
        { id: 1, singer: '周杰伦', song: '七里香' },
        { id: 2, singer: '林俊杰', song: '小酒窝' },
        { id: 3, singer: '蔡徐坤', song: '打篮球' },
        { id: 4, singer: '苏打绿', song: '小情歌' }
      ]
    }
  },
  methods: {
    jumpToDetail (song) {
      // $router就代表路由对象
      console.log(this.$router)
      // 直接传路径字符串
      // this.$router.push(`/detail/${song}`)

      // 传对象
      // this.$router.push({ path: `/detail/${song}` })
      this.$router.push({ name: 'Detail', params: { song } })
    }
  }
}
</script>
<style>
li {
  list-style: none;
}
li:hover {
  background-color: gray;
}
</style>
